<template>
  <div>
      <el-card style="width:98%;margin:auto;margin-top:10px;">
        <el-row>
            <el-col :span="3" style="text-align:right;">
                <img src="@/assets/lesson.jpg" alt="">
            </el-col>
            <el-col :span="12">
                <el-form :model="headerList" label-width="80px">
                    <el-form-item label="课程名称" prop="lessonName">
                        <span>{{headerList.lessonName}}</span>
                    </el-form-item>
                    <el-form-item label="教师名称" prop="nickname">
                        <span>{{headerList.nickname}}</span>
                    </el-form-item>
                    <el-form-item label="课程介绍" prop="introduction">
                        <span>{{headerList.introduction}}</span>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
      </el-card>
      <el-card style="width:98%;margin:auto;margin-top:10px;">
          <el-link href="#tree">章节目录</el-link>
          <el-link style="margin:auto;margin-left:10px;" href="#content">留言</el-link>
      </el-card>
      <el-card style="width:98%;margin:auto;margin-top:10px;" id="tree">
          <div slot="header">
              <el-row type="flex" class="row-bg" justify="space-between">
                  <el-col :span="6">
                      <span style="line-height:40px;">章节目录</span>
                  </el-col>
                  <el-col :span="6" style="text-align:right;">
                      <el-button type="primary" @click="add">新增</el-button>
                  </el-col>
              </el-row>
          </div>
        <el-tree :data="treeList" @node-click="nodeClick" v-loading="listLoading" :load="loadNode1" :props="defaultProps" lazy accordion></el-tree>
      </el-card>
      <el-card style="width:98%;margin:auto;margin-top:10px;" id="content">
          <div slot="header">
              <span>留言</span>
            
          </div>
          <div>
              <el-form :model="message" label-width="80px">
            <!-- <el-form-item label="昵称">
            <el-input v-model="addForm.nickname"></el-input>
            </el-form-item> -->
            <el-form-item label="留言：">
                <el-input v-model="message" style="width:90%;margin-right:10px;"></el-input>
                <el-button @click="addOk">发送</el-button>
            </el-form-item>
            <!-- <div style="width:100%;text-align:right;">
                
            </div> -->

        </el-form>
          </div>
      </el-card>
    <el-dialog title="添加" :visible.sync="addVisible">
        <el-form :model="addForm" label-width="80px">
            <!-- <el-form-item label="昵称">
            <el-input v-model="addForm.nickname"></el-input>
            </el-form-item> -->
            <el-form-item label="章节名称">
                <el-input v-model="addForm.chapterName"></el-input>
            </el-form-item>
            <el-form-item label="章节介绍">
                <el-input v-model="addForm.introduction"></el-input>
            </el-form-item>
            <el-form-item label="章节级别">
                <el-select v-model="addForm.chapterLevel" @change="levelChange">
                    <el-option value="0" label="级别1"></el-option>
                    <el-option value="1" label="级别2"></el-option>
                    <el-option value="2" label="级别3"></el-option>
                </el-select>
                <!-- <el-input v-model="addForm.chapterLevel"></el-input> -->
            </el-form-item>
            <el-form-item label="所属章节" v-show="chapterShow">
                <el-select v-model="addForm.chapterAfterId">
                    <el-option v-for="item in chapterOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <!-- <el-input v-model="addForm.chapterAfterId"></el-input> -->
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="addCancel">取消</el-button>
            <el-button @click="addOk">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { getChapter,getLesson,insertChapter,getChapterDown } from '@/api/lesson'
export default {
    data(){
        return {
            list:[],
            treeList:[],
            listLoading:false,
            search:{
                lessonId:0,
                chapterAfterId:0
            },
            defaultProps:{
                children:'children',
                label:'label',
                isLeaf:'leaf'
            },
            headerList:{
                lessonId: null,
                userId: null,
                lessonName: "",
                introduction: "",
                nickname:""
            },
            addVisible:false,
            addForm:{
                chapterName:'',
                introduction:'',
                chapterLevel:'',
                chapterAfterId:'',
                lessonId:''
            },
            message:"",
            chapterOptions:[]
        }
    },
    mounted(){
        this.search.lessonId=this.$route.query.lessonId
        this.fetchData()
        getLesson({id:this.$route.query.lessonId}).then((success)=>{
            this.headerList.lessonId=success.data.lessonId
            this.headerList.userId=success.data.userId
            this.headerList.lessonName=success.data.lessonName
            this.headerList.introduction=success.data.introduction
            this.headerList.nickname=success.data.nickname
        })
    },
    methods:{
        fetchData() {
            this.listLoading = true
            this.treeList=[]
            getChapter(this.search).then(response => {
                response.data.forEach((n)=>{
                    let obj={
                        label:n.chapterName,
                        chapterId:n.chapterId,
                        // children:[{}]
                    }
                    this.treeList.push(obj)
                })
                
                // this.total=response.data.total
                this.listLoading = false
            })
        },
        loadNode1(node,resolve){
            console.log(node,resolve)
            if (node.level === 0) {
                return resolve(this.treeList);
            }
            if (node.level > 2) return resolve([]);
            this.search.chapterAfterId=node.data.chapterId
            // console.log(this.search)
            let data=[]
            getChapter(this.search).then((success)=>{
                success.data.forEach((n)=>{
                    data.push({
                        label:n.chapterName,
                        chapterId:n.chapterId,
                    })
                })
            }).finally(()=>{
                resolve(data)
            })

        },
        nodeClick(data){
            console.log(data)
            let routeUrl=this.$router.resolve({path:'/lesson/details',query:{chapterAfterId:data.chapterId}})
            window.open(routeUrl .href,'_blank')
        },
        add(){
            this.addVisible=true
        },
        levelChange(val){
            console.log(val)
            this.chapterOptions=[]
            let obj={
                chapterLevel:val,
                lessonId:this.headerList.lessonId
            }
            getChapterDown(obj).then((success)=>{
                console.log(success)
                success.data.forEach((n)=>{
                    let obj={
                        value:n.chapterId,
                        label:n.chapterName
                    }
                    this.chapterOptions.push(obj)
                })
            })
            
        },
        initAdd(){
            this.addForm.chapterName=''
            this.addForm.introduction=''
            this.addForm.chapterLevel=''
            this.addForm.chapterAfterId=''
            // this.addForm.lessonId=''
        },
        addCancel(){
            this.addVisible=false
        },
        addOk(){
            let obj={
                chapterAfterId: this.addForm.chapterAfterId,
                chapterLevel: this.addForm.chapterLevel-""+1,
                chapterName: this.addForm.chapterName,
                introduction: this.addForm.introduction,
                lessonId: this.headerList.lessonId
            }
            
            insertChapter(obj).then((success)=>{
                console.log(success)
                this.addVisible=false
                this.fetchData()
            })
            // insert(this.addForm).then((success)=>{
            //     console.log(success)
            //     this.addVisible=false
            //     this.fetchData()
            // })
        },
    },
    computed:{
        chapterShow(){
            
            if(this.addForm.chapterLevel=="0"){
                this.addForm.chapterAfterId="0"
                return false
            }
            this.addForm.chapterAfterId=""
            return true
        }
    }
}
</script>

<style>

</style>